<!doctype html>
<html  class="x-admin-sm">
<head>
	<meta charset="UTF-8">
	<title>图书管理系统</title>
    <link rel="stylesheet" href="./X-admin/css/font.css">
    <link rel="stylesheet" href="./X-admin/css/login.css">
	<link rel="stylesheet" href="./X-admin/css/xadmin.css">
</head>
<body class="login-bg">
    <div class="login layui-anim layui-anim-up">
        <div class="message">图书管理系统登录</div>
        <div id="darkbannerwrap"></div>
        
        <form method="post" class="layui-form" >
            <input name="username" id="username" placeholder="用户名"  type="text" lay-verify="required" class="layui-input" >
            <hr class="hr15">
            <input name="password" id="password" lay-verify="required" placeholder="密码"  type="password" class="layui-input">
            <hr class="hr15">
            <input value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
            <hr class="hr20" >
        </form>
    </div>
    <!-- 底部结束 -->
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="./X-admin/lib/layui/layui.js" charset="utf-8"></script>
	<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script>
		layui.use(['form','layer'],function(){
			let form = layui.form
			let layer = layui.layer
			//当点击登录按钮的时候会执行以下代码
			form.on('submit(login)', function(data){
			  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
			  //调用AJAX向服务器发起请求
			  $.ajax({
				  url:"http://localhost:9527/users/login",
				  type: "POST",
				  dataType: "JSON",//声明服务端返回的数据必须是JSON数据格式
				  data:data.field,
				  success:function(res){
					  console.log(res)
					  if(res.code == "0"){
						//需要将用户的登录信息存放到Cookie中
						$.cookie("userInfo",JSON.stringify(res.data),{path:"/"})
						if(res.data.departmentTitle == "管理"){
							//管理员模式
								window.location.href="index.html";
						}
						else{
							//用户
							window.location.href="users.html"
						}
					  }else{
						  layer.msg("用户名或者密码错误",{icon:2});
					  }
				  }
			  })
			  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
		})
    </script>
</body>
</html>